<template>
  <view class="page-content">
    <!--初始化————授权页面-->
    <view class="page-tit">大薇云·执行人员登陆</view>
    <view class="page-body">

      <!--登录框-->
      <view class="login-input-box" v-if="userInfo.bind_status===2">
        <view class="box-tishi">提示：{{tishi}}</view>
        <!-- 手机 -->
        <view class="input-row">
          <input class="input-pho" type="string" v-model="params.mobile" placeholder="请输入手机号" :focus="true"></input>
        </view>
        <!-- 验证码 -->
        <view class="input-row-code">
          <view class="input-row-code-l">
            <input class="input-code" type="number" clearable v-model="params.sms_code" placeholder="请输入验证码" :maxLength="4"></input>
          </view>
          <view class="input-row-code-r">
            <button class="send-code" size="mini" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
          </view>
        </view>
        <view class="button-row" @tap="confirm(params)">
          <view class="button">登  录</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import mInput from '@/components/m-input/m-input.vue'
import { mapActions, mapGetters  } from 'vuex'
import  store  from '@/store'
//接口
import { getwechatopenidinfos,getwechatsmss,bindwechats } from '@/api/login'
export default {
  components: {
    mInput
  },
  data() {
    return {
      tishi:"请输入平台指定执行人员电话号码。",
      params:{
        mobile:'',
        sms_code:'',
        bind_code:''
      },
      userinfo:{},
      btnDis: false,
      btnText: "获取验证码",
    }
  },
  computed: {
    ...mapGetters(['userInfo','code'])
  },
  onLoad(option) {
    console.log(123123,option)
    /*//window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9369957c297f9825&redirect_uri=http%3A%2F%2Fsc.dtc.zone%2Fwechatauthorization&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
    if(option.openid_en){
      let openid
      openid = option.openid
      window.localStorage.setItem('openid',openid)
      const code = option.openid_en;
      state.state.code = code
      setStorage('code', code)
      //获取用户信息
      getwechatopenidinfos({code:''}).then(res =>{
        console.log(222,res)
      })
    }
    if(window.localStorage.getItem('pro_code')===""){
      console.log("重新授权");
      console.log('code',store.state.user.code);
      window.localStorage.removeItem('pro_code');
    }
    console.log(3333,this.code)
    getwechatopenidinfos({code:this.code}).then(res =>{
      console.log(222,res)
    })*/
  },
  methods: {
    ...mapActions('user',['setUserInfo','setCode','setOpenid']),
    //登录
    confirm(row){
      console.log(222,row)
      if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(row.mobile)) {
        uni.showToast({
          title: '请输入平台方注册过的手机号！',
          duration: 2000,
          icon: "none"
        });
        return;
      }
      if (!/^\d{4}$/.test(row.sms_code)) {
        uni.showToast({
          title: '请输入正确的验证码！',
          duration: 2000,
          icon: "none"
        });
        return;
      }
      row.bind_code = this.userInfo.bind_code
      bindwechats(row).then(res =>{
        console.log(555,res)
        if(res.code===1){
          uni.showToast({
            title: res.msg,
            duration: 2000,
            icon: "none"
          });
          window.location.href = res.data.authorization_url;
          //uni.navigateTo({url: '/pages/index/index?openid_en=' + res.data.code });
        }else if(res.code===5){
          uni.showModal({
            title: '提示',
            confirmText:'重新授权',
            content: res.msg,
            success: (res2) => {
              if (res2.confirm) {
                window.location.href = res.data.authorization_url;
              } else if (res2.cancel) {}
            }
          });
        }else{
          uni.showToast({
            title: res.msg,
            duration: 2000,
            icon: "none"
          });
        }
      })

    },
    // 发送验证码
    sendCode() {
      let resData =this.params
      if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(resData.mobile)) {
        uni.showToast({
          title: '请输入平台方注册过的手机号',
          duration: 2000,
          icon: "none"
        });
        return;
      }
      //请求接口
      getwechatsmss({mobile:this.params.mobile}).then(res =>{
        console.log(123,res)
        if(res.code === 1){
          uni.showToast({
            title: '发送成功！',
            duration: 2000,
            icon: "none"
          });
          // 开启倒计时
          this.countDown();

        }else if(res.code===5){
          uni.showModal({
            title: '提示',
            confirmText:'重新授权',
            content: res.msg,
            success: (res2) => {
              if (res2.confirm) {
                window.location.href = res.data.authorization_url;
              } else if (res2.cancel) {}
            }
          });
        }else {
          uni.showToast({
            title: res.msg,
            duration: 2000,
            icon: "none"
          });
        }
      })
    },

    // 验证码倒计时
    countDown() {
      let t = null;
      let timer = 60;
      this.btnDis = true;
      clearInterval(t);
      this.btnText = `${timer}s`;
      t = setInterval(() => {
        if (timer == 0) {
          clearInterval(t);
          this.btnText = "重新发送";
          this.btnDis = false;
          return;
        }
        timer--;
        this.btnText = `${timer}s`;
      }, 1000)
    },

  }
}
</script>
<style lang="scss">
.page-content{
  height:100vh;
  width: 100vw;
  background-image: url('/static/img/login_bg.jpg');
  background-repeat:no-repeat;
   background-size: 100% auto;
  display: flex;
  flex-direction: column;
  padding: 0 60rpx;
  .page-tit{
    padding-top: 120rpx;
    display: flex;
    justify-content: center;
    font-size: 44rpx;
    font-weight: 400;
    line-height: 44rpx;
    color: #FFFFFF;
    height: 400rpx;
  }
  .page-body{
    height: calc(100vh - 400rpx);
  }
}

.login-input-box {
  display: flex;
  flex-direction: column;
  margin-top: 40rpx;
  .box-tishi{
    font-size: 28rpx;
    font-weight: 400;
    line-height: 48rpx;
    color: #272727;
    margin-bottom: 30rpx;
  }
  .button-row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 88rpx;
    background: #4566FF;
    margin-bottom: 40rpx;
    border-radius: 8rpx;
    box-shadow: 0rpx 14rpx 26rpx rgba(69, 102, 255, 0.44);
    .button{
      font-size: 32rpx;
      color: #fff;

    }
  }
  .input-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 88rpx;
    background: #fff;
    border: 1rpx solid #DCDCDC;
    margin-bottom: 40rpx;
    border-radius: 8rpx;

    .input-pho {
      height: 88rpx;
      line-height: 88rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #666;
      padding: 0rpx 60rpx;
    }
  }

  .input-row-code {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 88rpx;
    background: #fff;
    border: 1rpx solid #DCDCDC;
    margin-bottom: 80rpx;
    border-radius: 8rpx;

    .input-row-code-l {
      flex: 65;
      display: flex;
      margin-right: 10rpx;
      .input-code{
        height: 88rpx;
        line-height: 88rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #666;
        padding: 0rpx 60rpx;
      }
    }
    .input-row-code-r {
      flex: 35;
      display: flex;
      border-radius: 8rpx;
      justify-content: center;
      align-items: center;
      .send-code{
        flex: 1;
        height: 84rpx;
        line-height: 86rpx;
        font-weight: 400;
        background: #fff;
        border: none;
        font-size: 24rpx;
        color: #4566FF;
      }
      .send-code:after{
        border: none;
      }
    }
  }
}
</style>
